<script>
export default {
  name: "PageButton",
  data(){
    return{
      currentPage:1,
      pageCount:10,
      disabled:false,
      layout:'total,sizes,prev,pager,next,jumper',
    }
  },
  methods:{
    handleCurrentChange(currentPage){
      this.currentPage=currentPage;
      this.$emit('pageChange',currentPage);
    },
    setPageCount(pageCount){
      this.pageCount=pageCount;
    },
    setCurrentPage(currentPage){
      this.currentPage=currentPage;
    },
    
  }
};
</script>
  
<template>
  <div class="PageButtons">
    <el-pagination
      v-model:current-page="currentPage"
      :disabled="disabled"
      :page-count="pageCount"
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

  
  
<style scoped>
.PageButtons  {
  width: 500px;
  height: 10px;
  margin-left: 300px;
}
.PageButtons {
  margin-bottom: 16px;
}
</style>